<style scoped="scoped">
</style>
<template>
  <div>
    <el-dialog
      title="打印"
      width="900px"
      :visible.sync="showModal"
      center
    >
      <div class="pick-list-content-box"
           v-for="(item, index) in detail"
           :key="index"
           v-show="index < 1"
      >
        <div class="pick-list-content" style="width: 750px;margin:0 auto;"><!--border: 1px solid #999;margin:0 auto;-->
          <div class="pick-content-title"
               style="width: 100%;height: 50px;text-align: center;font-size: 18px;font-weight: 600;line-height: 49px;">
            <span>{{item.workerName}}<span v-if="item.plateNumber">（{{item.plateNumber}}）</span> {{item.planOperateTime | unixTimestampFilter('YYYY/MM/DD')}}{{titleName}}</span>
          </div>
          <div class="pick-content-service">
            <table class="content-service" style="width: 100%;">
              <tr>
                <td width="35%">{{orderNoName}}:  <span> {{item.loadingCode}}</span></td>
                <td width="18%">  总单数: <span>{{item.totalOrderNum}} 单</span></td>
                <td width="15%">总包件: <span>{{item.totalPackage}}</span>件</td>
                <td width="20%">总体积: <span>{{item.totalVolume}}m³</span></td>
                <td width="15%">总重量: <span>{{item.totalWeight}}kg</span></td>
              </tr>
            </table>
            <table style="width:100%; border-collapse: collapse;">
              <thead>
              <tr style="line-height: 25px">
                <th width="25px" :style="thStyle2">#</th>
                <th width="150px" :style="thStyle2">订单号</th>
                <th width="60px" :style="thStyle2">{{titleName === '提货装车单' ? '提货人' : '客户姓名'}}</th>
                <th width="100px" :style="thStyle2">{{titleName === '提货装车单' ? '提货电话' : '客户电话'}}</th>
                <th width="100px" :style="thStyle1">{{titleName === '提货装车单' ? '提货地址' : '客户地址'}}</th>
                <th width="50px" :style="thStyle2">预约时段</th>
                <th width="100px" :style="thStyle2" style="text-align: center"><span>商品名称</span></th>
                <!--<th width="200px" :style="thStyle3">包件名称</th>-->
                <th width="50px" :style="thStyle2">商品数量</th>
                <th width="50px" :style="thStyle2">包件数量</th>
              </tr>
              </thead>
              <tbody v-for="(p, pIndex) in item.loadingOrderDetailsOrderList" :key="pIndex">
                <!--如果没有产品信息 productList ,只显示 已有的数据-->
                <tr v-if="p.customArr == false">
                  <td :style="thStyle2">{{pIndex + 1}}</td>
                  <!--服务单号-->
                  <td  :style="thStyle2" style="word-break: break-all;">
                    {{p.orderNo}}
                  </td>
                  <td :style="thStyle2"><!--姓名-->
                    {{p.pickUpName}}
                  </td>
                  <td :style="thStyle2"><!--电话-->
                    {{p.pickUpPhone}}
                  </td>
                  <td :style="thStyle1" style="word-break: break-all;"><!--地址-->
                    {{p.pickUpCity}}{{p.pickUpDistrict}} {{p.pickUpAddress}}
                  </td>
                  <td :style="thStyle2"><!--预约时段-->
                    {{p.timeIntervalCode | filterDataBaseDictionary}}
                  </td>
                  <td :style="thStyle2" style="word-break: break-all;">
                  </td>
                  <td :style="thStyle2">
                  </td>
                  <td :style="thStyle2"></td></tr>
                <tr v-for="(t, tIndex) in p.customArr" :key="tIndex">
                  <td :style="thStyle2" :rowspan="p.customArr.length" v-if="tIndex == 0">{{pIndex + 1}}</td>
                  <!--服务单号-->
                  <td :style="thStyle2" :rowspan="p.customArr.length" v-if="tIndex == 0" style="word-break: break-all;">
                    {{p.orderNo}}
                  </td>
                  <td :style="thStyle2" :rowspan="p.customArr.length" v-if="tIndex == 0"><!--用户姓名-->
                    {{p.consigneName}}
                  </td>
                  <td :style="thStyle2" :rowspan="p.customArr.length" v-if="tIndex == 0"><!--用户电话-->
                    {{p.consignePhone}}
                  </td>
                  <td :style="thStyle1" :rowspan="p.customArr.length" v-if="tIndex == 0" style="word-break: break-all;"><!--用户地址-->
                    {{p.consigneCity}}{{p.consigneDistrict}} {{p.consigneAddress}}
                    <!--新疆维吾尔自治区/克孜勒苏柯尔克孜自治州/阿图什市/高新西区/皇后大道东三段188号蜀都中心1期3栋508号-->
                  </td>
                  <td :style="thStyle2" :rowspan="p.customArr.length" v-if="tIndex == 0"><!--预约时段-->
                    {{p.timeIntervalCode | filterDataBaseDictionary}}
                  </td>
                  <!--<td :style="thStyle2" :rowspan="t.PackageLength" v-if="t.isFirstPackage" style="word-break: break-all;">-->
                    <!--{{t.productName}}-->
                  <!--</td>-->
                  <td :style="thStyle2">{{t.productName}}</td>
                  <!--<td :style="thStyle3">{{t.name}}</td> &lt;!&ndash;原：包件名称&ndash;&gt;-->
                  <td :style="thStyle2">{{t.productNum}}</td>
                  <td :style="thStyle2">{{t.totalPackage}}</td>
                </tr>
              </tbody>
            </table>
            <!--<h4 style="margin: 10px 0px 2px 0px">用户确认</h4>-->
            <!--<table style="width: 100%;">-->
            <!--<tr>-->
            <!--<td style="width: 40%; padding-left: 18px">经办客服：{{user}}</td>-->
            <!--<td>用户签字：</td>-->
            <!--</tr>-->
            <!--</table>-->
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="hide">取 消</el-button>
    <el-button type="primary" @click="print()">打 印</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {getLodop, validateLODOP, copy} from '@/utils'
// httpGetResponse
// import {httpSuccessPost} from '@/service/dataService'
import {unixTimestampFilter, filterDataBaseDictionary} from '@/filters'
// import store from 'store'
let LODOP = null
export default {
  name: 'PrintModal',
  props: {
    idArr: {
      type: Array,
      required: true
    },
    titleName: {
      type: String,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary
  },
  data() {
    return {
      showModal: false,
      // user: store.get('erpUser').user.name,
      thStyle1: 'text-align: center;border: 1px solid #666;width:100px',
      thStyle2: 'text-align: center;border: 1px solid #666;padding: 1px 2px;text-align:center;',
      thStyle3: 'text-align: center;border: 1px solid #666;padding: 1px 2px;text-align:center;width:200px',
      detail: {}
    }
  },
  created() {
    getLodop().then(result => {
      LODOP = result
    })
  },
  mounted() {
    this.setStyle()
  },
  computed: {
    orderNoName() {
      if (this.titleName === '配送装车单') {
        return '配送单号'
      } else if (this.titleName === '提货装车单') {
        return '提货单号'
      } else if (this.titleName === '干线装车单') {
        return '干线单号'
      }
      return '单号'
    }
  },
  methods: {
    // 单条打印 或多条批量打印
    getDetail() {
      console.log('this.idArr', this.idArr)
      this.$ajax.post('/ms-terminal-order/loading-order/get-loading-order-details-list', this.idArr).then(response => {
        if (!response.data) {
          return
        }
        if (Array.isArray(response.data)) {
          let data = copy(response.data, true)
          data.forEach(item => {
            item.loadingOrderDetailsOrderList.forEach(p => {
              p.customArr = [] // 组装成两层结构
              p.loadingOrderDetailsProductList.forEach((t, x) => {
                if (x === 0) {
                  t.isFirstPackage = true // 是否为包的第一条数据
                } else {
                  t.isFirstPackage = false
                }
                t.PackageLength = p.loadingOrderDetailsProductList.length
              })
              p.customArr = p.customArr.concat(p.loadingOrderDetailsProductList)
            })
          })
          console.log('data', data)
          this.detail = data
        }
      })
    },
    show() {
      this.showModal = true
      this.setStyle()
      this.$nextTick(_ => {
        this.getDetail()
      })
    },
    hide() {
      this.showModal = false
    },
    print() {
      this.setStyle()
      if (validateLODOP(LODOP)) {
        $(this.$el).find('.pick-list-content-box').each((index, v) => {
          console.log(v, '5555555555', index)
          // LODOP.SET_PRINT_PAGESIZE(1, 2180, 1400, 'A4')
          // 增加超文本项（纸张内容的上边距, 左距, 打印区域的宽度,  高, strHtml)
          LODOP.ADD_PRINT_HTM('1mm', '1mm', '218mm', '260mm', v.innerHTML)
          LODOP.SET_PRINT_STYLEA(0, 'ShowBarText', 0)
          // LODOP.SET_PRINT_STYLEA('PRINT_INIT', 'Left', '5mm')
          LODOP.NewPage()
        })
        LODOP.SET_PREVIEW_WINDOW(1, 0, 0, '900px', '800px', '') // 设置打印预览窗口的大小
        LODOP.SET_LICENSES('成都居家通物流有限责任公司', 'B54155199971EA1DB53ED53340530EFE', '', '')
        this.hide()
        LODOP.PREVIEW()
        this.labelRecord()
      }
    },
    setStyle() {
      this.$nextTick(_ => {
        // setTimeout(_ => {
        //   $(this.$el).find('.pick-content-table').each((index, v) => {
        //     v.setAttribute('style', 'width: 100%;border-collapse:collapse;')
        //     $(v).find('th').each((index2, v2) => {
        //       v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
        //     })
        //     $(v).find('td').each((index2, v2) => {
        //       v2.setAttribute('style', 'text-align: center;border: 1px solid #999;padding: 0px 2px;')
        //     })
        //   })
        // }, 500)
      })
    },
    // 记录打印次数:替换旧接口：/ms-warehouse-order/loading-order/print-list

    labelRecord() {
      this.$ajax.post('/ms-terminal-order/loading-order/print-list', this.idArr).then(response => {
        this.$emit('refresh')
        console.log('response', response)
      })
    }
  }
}
</script>
